import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { enterPage, Perf } from 'utils/track';
import * as actions from '../actions/index';
import { Loading } from '@teamix/ui';
import { Section } from '@alife/devops-ui';
import BaseForm from './baseForm';
import DangerousForm from './dangerousForm';
import intl from '../../../../../../../../../locale';

const { pathResource } = window.FORCE;

class Root extends Component {
  static propTypes = {
    saveGeneral: PropTypes.func,
    searchNamespaces: PropTypes.func,
    transfer: PropTypes.func,
    rename: PropTypes.func,
    groupInfo: PropTypes.object,
    remove: PropTypes.func,
    isRemoving: PropTypes.bool,
  };

  static defaultProps = {
    saveGeneral: () => {},
    searchNamespaces: () => {},
    remove: () => {},
    transfer: () => {},
    rename: () => {},
    groupInfo: null,
    isRemoving: false,
  };

  componentDidMount() {
    const fullName = pathResource.fullName.split('/')[1]
      ? pathResource.fullName.split('/')[1].trim()
      : '';
    document.title = intl.get(
      {
        id: 'code-assets.settings.containers.root.BasicSettingsFullnameCloudEffect',
        defaultMessage: '基本设置 · {fullName}  · 云效 Codeup',
      },
      { fullName },
    );
    this.props.getGroupDetailInfo();
    enterPage('Group-Settings', { sendPerf: false });
  }

  componentWillUnmount() {
    // this.props.clearTimer();

    // 清空数据
    this.props.resetData();
  }

  render() {
    const {
      groupInfo,
      saveGeneral,
      searchNamespaces,
      transfer,
      rename,
      remove,
      isTransferring,
      isRemoving,
    } = this.props;

    const isLoading = groupInfo === null;
    return (
      <div className="base-setting-main">
        {isLoading ? (
          <div className="setting-loading">
            <Loading />
          </div>
        ) : (
          !!groupInfo && (
            <>
              <Section
                title={intl.get({
                  id: 'code-assets.containers.baseForm.BasicInformation',
                  defaultMessage: '基本信息',
                })}
              >
                <BaseForm
                  id={groupInfo.id}
                  visibilityLevel={groupInfo.visibility_level}
                  description={groupInfo.description}
                  name={groupInfo.name}
                  path={groupInfo.path}
                  saveGeneral={saveGeneral}
                  avatarUrl={groupInfo.avatar_url}
                />
              </Section>
              <Section
                title={intl.get({
                  id: 'code-assets.containers.dangerousForm.HighRiskOperations',
                  defaultMessage: '高危操作',
                })}
              >
                <DangerousForm
                  {...this.props}
                  searchNamespaces={searchNamespaces}
                  transfer={transfer}
                  name={groupInfo.name}
                  path={groupInfo.path}
                  httpUrl={groupInfo.web_url}
                  rename={rename}
                  remove={remove}
                  fullName={groupInfo.name_with_namespace}
                  isRemoving={isRemoving}
                  isTransferring={isTransferring}
                />

                <Perf page={'Group-Settings'} />
              </Section>
            </>
          )
        )}
      </div>
    );
  }
}

export default connect(
  (state) => state.group.groupSettings.settings,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
